<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>架构图设计器</title>
    <link rel="stylesheet" href="./styles/main.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuedraggable@4.1.0/dist/vuedraggable.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/js/all.min.js"></script>
</head>
<body>
    <div id="app">
        <div class="architecture-designer">
            <div class="sidebar">
                <h2>组件库</h2>
                <div class="component-group">
                    <h3>组件库</h3>
                    <div class="component-list">
                        <div class="component user-role-block" draggable="true" @dragstart="dragStart($event, 'user-role')">
                            <div class="component-inner">
                                <i class="fas fa-user"></i>
                                <span>用户角色</span>
                            </div>
                        </div>
                        <div class="component function-block" draggable="true" @dragstart="dragStart($event, 'function')">
                            <div class="component-inner">
                                <i class="fas fa-cogs"></i>
                                <span>功能模块</span>
                            </div>
                        </div>
                        <div class="component scene-block" draggable="true" @dragstart="dragStart($event, 'scene')">
                            <div class="component-inner">
                                <i class="fas fa-th-large"></i>
                                <span>应用场景</span>
                            </div>
                        </div>
                        <div class="component capability-block" draggable="true" @dragstart="dragStart($event, 'capability')">
                            <div class="component-inner">
                                <i class="fas fa-brain"></i>
                                <span>能力支撑</span>
                            </div>
                        </div>
                        <div class="component support-block" draggable="true" @dragstart="dragStart($event, 'support')">
                            <div class="component-inner">
                                <i class="fas fa-layer-group"></i>
                                <span>基础支持</span>
                            </div>
                        </div>
                        <div class="component stats-block" draggable="true" @dragstart="dragStart($event, 'stats')">
                            <div class="component-inner">
                                <i class="fas fa-chart-bar"></i>
                                <span>统计数据</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="component-group">
                    <h3>自定义组件</h3>
                    <div class="component-list">
                        <div class="component custom-block" draggable="true" @dragstart="dragStart($event, 'custom')">
                            <div class="component-inner">
                                <i class="fas fa-puzzle-piece"></i>
                                <span>自定义组件</span>
                            </div>
                        </div>
                        <div class="component plugin-block" @click="showPluginManager = true">
                            <div class="component-inner">
                                <i class="fas fa-cog"></i>
                                <span>插件管理</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="workspace" @drop="drop($event)" @dragover="allowDrop($event)" @dragenter="dragEnter($event)" @dragleave="dragLeave($event)">
                <!-- 用户角色区域 -->
                <div class="architecture-row user-role-row">
                    <div class="vertical-label">
                        <div class="label-content">
                            <span>用户</span>
                            <span>角色</span>
                        </div>
                    </div>
                    
                    <draggable class="architecture-modules" 
                               :list="modules.userRoles" 
                               group="modules"
                               item-key="id"
                               :animation="300"
                               ghost-class="sortable-ghost"
                               chosen-class="sortable-chosen"
                               drag-class="sortable-drag"
                               @start="onDragStart"
                               @end="onDragEnd"
                               @move="onMove"
                               @dragenter="dragEnter($event)"
                               @dragleave="dragLeave($event)">
                        <template #item="{element}">
                            <div class="module user-role-module" :class="{ active: element.active }" @click="selectModule(element)">
                                <div class="module-header">
                                    <i class="fas fa-user"></i>
                                    <span>{{ element.title }}</span>
                                </div>
                                <div class="module-content">
                                    <span>{{ element.subtitle }}</span>
                                </div>
                                <div class="module-actions" v-if="element.active">
                                    <button @click.stop="editModule(element)"><i class="fas fa-edit"></i></button>
                                    <button @click.stop="deleteModule(element, 'userRoles')"><i class="fas fa-trash"></i></button>
                                </div>
                            </div>
                        </template>
                    </draggable>
                    
                    <div class="vertical-label right-label">
                        <div class="label-content">
                            <span>全</span>
                            <span>角</span>
                            <span>色</span>
                        </div>
                    </div>
                </div>
                
                <!-- 功能区域 -->
                <div class="architecture-row function-row">
                    <div class="vertical-label">
                        <div class="label-content">
                            <span>全</span>
                            <span>展</span>
                            <span>示</span>
                        </div>
                    </div>
                    
                    <draggable class="architecture-modules" 
                               :list="modules.functions" 
                               group="modules"
                               item-key="id"
                               :animation="300"
                               ghost-class="sortable-ghost"
                               chosen-class="sortable-chosen"
                               drag-class="sortable-drag"
                               @start="onDragStart"
                               @end="onDragEnd"
                               @move="onMove"
                               @dragenter="dragEnter($event)"
                               @dragleave="dragLeave($event)">
                        <template #item="{element}">
                            <div class="module function-module" :class="{ active: element.active }" @click="selectModule(element)">
                                <div class="tab-item" :class="{ active: element.active }">{{ element.title }}</div>
                                <div class="module-actions" v-if="element.active">
                                    <button @click.stop="editModule(element)"><i class="fas fa-edit"></i></button>
                                    <button @click.stop="deleteModule(element, 'functions')"><i class="fas fa-trash"></i></button>
                                </div>
                            </div>
                        </template>
                    </draggable>
                    
                    <div class="vertical-label right-label">
                        <div class="label-content">
                            <span>全</span>
                            <span>展</span>
                            <span>示</span>
                        </div>
                    </div>
                </div>
                
                <!-- 应用场景区域 -->
                <div class="architecture-row scene-row">
                    <div class="vertical-label">
                        <div class="label-content">
                            <span>应用</span>
                            <span>场景</span>
                        </div>
                    </div>
                    
                    <div class="scene-container">
                        <draggable class="architecture-modules scene-modules" 
                                :list="modules.scenes" 
                                group="modules"
                                item-key="id"
                                :animation="300"
                                ghost-class="sortable-ghost"
                                chosen-class="sortable-chosen"
                                drag-class="sortable-drag"
                                @start="onDragStart"
                                @end="onDragEnd"
                                @move="onMove"
                                @dragenter="dragEnter($event)"
                                @dragleave="dragLeave($event)">
                            <template #item="{element}">
                                <div class="module scene-module" :class="{ active: element.active }" @click="selectModule(element)">
                                    <div class="module-title">{{ element.title }}</div>
                                    <div class="module-items">
                                        <div v-for="item in element.items" :key="item.id" class="scene-item">{{ item.name }}</div>
                                    </div>
                                    <div class="module-actions" v-if="element.active">
                                        <button @click.stop="editModule(element)"><i class="fas fa-edit"></i></button>
                                        <button @click.stop="deleteModule(element, 'scenes')"><i class="fas fa-trash"></i></button>
                                    </div>
                                </div>
                            </template>
                        </draggable>
                    </div>
                    
                    <div class="vertical-label right-label">
                        <div class="label-content">
                            <span>全</span>
                            <span>过</span>
                            <span>程</span>
                        </div>
                    </div>
                </div>
                
                <!-- 统计数据区域 -->
                <div class="architecture-row stats-row">
                    <div class="vertical-label">
                        <div class="label-content">
                            <span>数据</span>
                            <span>统计</span>
                        </div>
                    </div>
                    
                    <draggable class="architecture-modules stats-modules" 
                               :list="modules.stats" 
                               group="modules"
                               item-key="id"
                               :animation="300"
                               ghost-class="sortable-ghost"
                               chosen-class="sortable-chosen"
                               drag-class="sortable-drag"
                               @start="onDragStart"
                               @end="onDragEnd"
                               @move="onMove"
                               @dragenter="dragEnter($event)"
                               @dragleave="dragLeave($event)">
                        <template #item="{element}">
                            <div class="module stats-module" :class="{ active: element.active }" @click="selectModule(element)">
                                <div class="stats-item">{{ element.title }}</div>
                                <div class="module-actions" v-if="element.active">
                                    <button @click.stop="editModule(element)"><i class="fas fa-edit"></i></button>
                                    <button @click.stop="deleteModule(element, 'stats')"><i class="fas fa-trash"></i></button>
                                </div>
                            </div>
                        </template>
                    </draggable>
                    
                    <div class="vertical-label right-label">
                        <div class="label-content">
                            <span>全</span>
                            <span>数</span>
                            <span>据</span>
                        </div>
                    </div>
                </div>
                
                <!-- 能力支撑区域 -->
                <div class="architecture-row capability-row">
                    <div class="vertical-label">
                        <div class="label-content">
                            <span>能力</span>
                            <span>支撑</span>
                        </div>
                    </div>
                    
                    <draggable class="architecture-modules capability-modules" 
                               :list="modules.capabilities" 
                               group="modules"
                               item-key="id"
                               :animation="300"
                               ghost-class="sortable-ghost"
                               chosen-class="sortable-chosen"
                               drag-class="sortable-drag"
                               @start="onDragStart"
                               @end="onDragEnd"
                               @move="onMove"
                               @dragenter="dragEnter($event)"
                               @dragleave="dragLeave($event)">
                        <template #item="{element}">
                            <div class="module capability-module" :class="{ active: element.active }" @click="selectModule(element)">
                                <div class="capability-item">{{ element.title }}</div>
                                <div class="logo-area" v-if="element.logo">
                                    <img :src="element.logo" :alt="element.title" :class="['capability-logo', getLogoSizeClass(element)]">
                                </div>
                                <div class="module-actions" v-if="element.active">
                                    <button @click.stop="editModule(element)"><i class="fas fa-edit"></i></button>
                                    <button @click.stop="deleteModule(element, 'capabilities')"><i class="fas fa-trash"></i></button>
                                </div>
                            </div>
                        </template>
                    </draggable>
                    
                    <div class="vertical-label right-label">
                        <div class="label-content">
                            <span>全</span>
                            <span>能</span>
                            <span>力</span>
                        </div>
                    </div>
                </div>
                
                <!-- 基础支持区域 -->
                <div class="architecture-row support-row">
                    <div class="vertical-label">
                        <div class="label-content">
                            <span>基础</span>
                            <span>支撑</span>
                        </div>
                    </div>
                    
                    <draggable class="architecture-modules support-modules" 
                               :list="modules.supports" 
                               group="modules"
                               item-key="id"
                               :animation="300"
                               ghost-class="sortable-ghost"
                               chosen-class="sortable-chosen"
                               drag-class="sortable-drag"
                               @start="onDragStart"
                               @end="onDragEnd"
                               @move="onMove"
                               @dragenter="dragEnter($event)"
                               @dragleave="dragLeave($event)">
                        <template #item="{element}">
                            <div class="module support-module" :class="{ active: element.active }" @click="selectModule(element)">
                                <div class="support-item">{{ element.title }}</div>
                                <div class="module-actions" v-if="element.active">
                                    <button @click.stop="editModule(element)"><i class="fas fa-edit"></i></button>
                                    <button @click.stop="deleteModule(element, 'supports')"><i class="fas fa-trash"></i></button>
                                </div>
                            </div>
                        </template>
                    </draggable>
                    
                    <div class="vertical-label right-label">
                        <div class="label-content">
                            <span>全</span>
                            <span>支</span>
                            <span>持</span>
                        </div>
                    </div>
                </div>
                
                <!-- 自定义组件区域 -->
                <div class="architecture-row custom-row">
                    <div class="vertical-label">
                        <div class="label-content">
                            <span>自定义</span>
                            <span>组件</span>
                        </div>
                    </div>
                    
                    <draggable class="architecture-modules custom-modules" 
                               :list="modules.customs" 
                               group="modules"
                               item-key="id"
                               :animation="300"
                               ghost-class="sortable-ghost"
                               chosen-class="sortable-chosen"
                               drag-class="sortable-drag"
                               @start="onDragStart"
                               @end="onDragEnd"
                               @move="onMove"
                               @dragenter="dragEnter($event)"
                               @dragleave="dragLeave($event)">
                        <template #item="{element}">
                            <div class="module custom-module" :class="{ active: element.active }" @click="selectModule(element)">
                                <div class="custom-item" :style="{ backgroundColor: element.color || '#6c757d' }">
                                    <i :class="element.icon || 'fas fa-puzzle-piece'"></i>
                                    <span>{{ element.title }}</span>
                                </div>
                                <div class="module-actions" v-if="element.active">
                                    <button @click.stop="editModule(element)" title="编辑组件" aria-label="编辑组件"><i class="fas fa-edit"></i></button>
                                    <button @click.stop="deleteModule(element, 'customs')" title="删除组件" aria-label="删除组件"><i class="fas fa-trash"></i></button>
                                </div>
                            </div>
                        </template>
                    </draggable>
                    
                    <div class="vertical-label right-label">
                        <div class="label-content">
                            <span>自</span>
                            <span>定</span>
                            <span>义</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 编辑模块弹窗 -->
        <div class="modal" v-if="showModal">
            <div class="modal-content">
                <div class="modal-header">
                    <h2>{{ modalTitle }}</h2>
                    <span class="close" @click="showModal = false">&times;</span>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="module-title">标题</label>
                        <input type="text" id="module-title" v-model="editingModule.title">
                    </div>
                    
                    <div class="form-group" v-if="editingModule.type === 'user-role'">
                        <label for="module-subtitle">副标题</label>
                        <input type="text" id="module-subtitle" v-model="editingModule.subtitle">
                    </div>
                    
                    <div class="form-group" v-if="editingModule.type === 'scene'">
                        <label>子项目</label>
                        <div v-for="(item, index) in editingModule.items" :key="index" class="item-row">
                            <input type="text" v-model="item.name" placeholder="子项目名称" :aria-label="'子项目名称 ' + (index + 1)">
                            <button @click="removeItem(index)" class="remove-button" title="删除此项目" aria-label="删除此项目">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                        <button @click="addItem" class="add-button">
                            <i class="fas fa-plus"></i> 添加子项目
                        </button>
                    </div>
                    
                    <div class="form-group" v-if="editingModule.type === 'capability'">
                        <label for="module-logo">Logo图片</label>
                        <div class="logo-input-group">
                            <input type="text" id="module-logo" v-model="editingModule.logo" placeholder="输入logo图片的URL">
                            <div class="logo-upload-section">
                                <label for="logo-upload" class="upload-button">
                                    <i class="fas fa-upload"></i> 上传图片
                                </label>
                                <input type="file" id="logo-upload" @change="handleLogoUpload($event)" accept="image/*" style="display: none;">
                            </div>
                        </div>
                        <div class="logo-preview" v-if="editingModule.logo">
                            <img :src="editingModule.logo" alt="Logo预览" class="logo-preview-img">
                            <div class="logo-actions">
                                <button type="button" @click="clearLogo" class="clear-logo-btn" title="清除Logo">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        </div>
                        <div class="logo-options" v-if="editingModule.logo">
                            <label for="logo-size">Logo尺寸:</label>
                            <select id="logo-size" v-model="editingModule.logoSize">
                                <option value="small">小 (20px)</option>
                                <option value="medium" selected>中 (40px)</option>
                                <option value="large">大 (60px)</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="form-group" v-if="editingModule.type === 'custom'">
                        <label for="custom-icon">图标</label>
                        <div class="icon-selector">
                            <input type="text" id="custom-icon" v-model="editingModule.icon" placeholder="输入Font Awesome图标类名">
                            <div class="icon-preview">
                                <i :class="editingModule.icon || 'fas fa-question'"></i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group" v-if="editingModule.type === 'custom'">
                        <label for="custom-color">颜色</label>
                        <input type="color" id="custom-color" v-model="editingModule.color">
                    </div>
                </div>
                <div class="modal-footer">
                    <button @click="showModal = false" class="cancel-button">取消</button>
                    <button @click="saveModule" class="save-button">保存</button>
                </div>
            </div>
        </div>
        
        <!-- 插件管理器弹窗 -->
        <div class="modal" v-if="showPluginManager">
            <div class="modal-content plugin-manager">
                <div class="modal-header">
                    <h2>插件管理器</h2>
                    <span class="close" @click="showPluginManager = false">&times;</span>
                </div>
                <div class="modal-body">
                    <div class="plugin-tabs">
                        <div class="tab-header">
                            <button :class="{ active: activePluginTab === 'create' }" @click="activePluginTab = 'create'">创建插件</button>
                            <button :class="{ active: activePluginTab === 'import' }" @click="activePluginTab = 'import'">导入插件</button>
                            <button :class="{ active: activePluginTab === 'export' }" @click="activePluginTab = 'export'">导出插件</button>
                        </div>
                        
                        <!-- 创建插件 -->
                        <div v-if="activePluginTab === 'create'" class="tab-content">
                            <div class="form-group">
                                <label for="plugin-name">插件名称</label>
                                <input type="text" id="plugin-name" v-model="newPlugin.name" placeholder="输入插件名称">
                            </div>
                            <div class="form-group">
                                <label for="plugin-description">插件描述</label>
                                <textarea id="plugin-description" v-model="newPlugin.description" placeholder="输入插件描述"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="plugin-icon">图标</label>
                                <div class="icon-selector">
                                    <input type="text" id="plugin-icon" v-model="newPlugin.icon" placeholder="输入Font Awesome图标类名">
                                    <div class="icon-preview">
                                        <i :class="newPlugin.icon || 'fas fa-question'"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="plugin-color">颜色</label>
                                <input type="color" id="plugin-color" v-model="newPlugin.color">
                            </div>
                            <div class="form-group">
                                <label>自定义属性</label>
                                <div v-for="(attr, index) in newPlugin.attributes" :key="index" class="attribute-row">
                                    <input type="text" v-model="attr.name" placeholder="属性名" :aria-label="'属性名称 ' + (index + 1)">
                                    <select v-model="attr.type" :aria-label="'属性类型 ' + (index + 1)">
                                        <option value="text">文本</option>
                                        <option value="number">数字</option>
                                        <option value="url">链接</option>
                                        <option value="color">颜色</option>
                                    </select>
                                    <button @click="removeAttribute(index)" class="remove-btn" title="删除属性" :aria-label="'删除属性 ' + (index + 1)">
                                        <i class="fas fa-minus"></i>
                                    </button>
                                </div>
                                <button @click="addAttribute" class="add-btn">
                                    <i class="fas fa-plus"></i> 添加属性
                                </button>
                            </div>
                            <div class="form-actions">
                                <button @click="createPlugin" class="primary-btn">创建插件</button>
                            </div>
                        </div>
                        
                        <!-- 导入插件 -->
                        <div v-if="activePluginTab === 'import'" class="tab-content">
                            <div class="form-group">
                                <label for="plugin-import-file">导入插件配置</label>
                                <input type="file" id="plugin-import-file" @change="importPlugin" accept=".json">
                            </div>
                            <div class="form-group">
                                <label for="plugin-import-text">或粘贴JSON配置</label>
                                <textarea id="plugin-import-text" v-model="importPluginText" placeholder="粘贴插件配置JSON"></textarea>
                                <button @click="importPluginFromText" class="primary-btn">导入配置</button>
                            </div>
                        </div>
                        
                        <!-- 导出插件 -->
                        <div v-if="activePluginTab === 'export'" class="tab-content">
                            <div class="plugin-list">
                                <div v-for="plugin in customPlugins" :key="plugin.id" class="plugin-item">
                                    <div class="plugin-info">
                                        <i :class="plugin.icon"></i>
                                        <span>{{ plugin.name }}</span>
                                    </div>
                                    <button @click="exportPlugin(plugin)" class="export-btn">导出</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="./js/main.js"></script>
</body>
</html> 